<template>
  <div class="table-component">
    <div class="total-amount-title">收费规则</div>
    <div class="total-amount">
      {{ table.data[0].freeDuration }}
    </div>
    <div class="table">
      <el-table
        :data="table.data"
        style="width: 100%"
        :header-cell-style="{
          background: '#F1F1F1',
          'font-size': '14px',
          'font-weight': 600,
          color: '#333333',
        }"
        :cell-style="{
          'font-size': '14px',
          'font-weight': 400,
          color: '#333333',
        }"
        border
      >
        <el-table-column label="工作日">
          <template #default="scope">
            {{ scope.row.workingChargeRule }}
          </template>
        </el-table-column>
        <el-table-column label="非工作日">
          <template #default="scope">
            {{ scope.row.nonWorkingChargeRule }}
          </template>
        </el-table-column>
        <template #empty>
          <el-empty :image="imgNone" />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, watch, onMounted } from "vue";
const imgNone = new URL("@/assets/image/imgNone.png", import.meta.url).href;
const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});

const table = reactive({
  data: [],
});

watch(
  () => props.orderDetails,
  (newVal) => {
    if (Array.isArray(newVal)) {
      table.data = newVal;
    } else {
      table.data = [newVal];
    }
  },
  {
    immediate: true, // 立即执行一次
  }
);

onMounted(() => {
  getData();
});

const getData = () => {
  if (Array.isArray(props.orderDetails)) {
    table.data = props.orderDetails;
  } else {
    table.data = [props.orderDetails];
  }
};

getData();
</script>

<style lang="less" scoped>
.table {
  margin-top: 24px;
}
.total-amount-title {
  font-weight: 600;
  font-size: 26px;
  color: #333333;
}
.total-amount {
  font-weight: 600;
  font-size: 20px;
  color: #333333;
  margin-top: 24px;
}
</style>